<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>项目内容</title>
<link href="${pageContext.request.contextPath}/mycss/default.css"
	rel="stylesheet">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/showdiv.js"></script>
<script type="text/javascript">

</script>

<style type="text/css">
#model1, #model2, #model3, #model4 {
	position: fixed;
	width: 550px;
	height: 380px;
	top: 30%;
	left: 38%;
	margin: 0 auto;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	perspective: 600px;
	text-indent: 2em;
	font-family: "微软雅黑";
	line-height: 25px;
	padding: 20px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%,
		rgba(0, 0, 0, 0.15) 100%),
		radial-gradient(at top center, rgba(255, 255, 255, 0.40) 0%,
		rgba(0, 0, 0, 0.40) 120%) #989898;
	background-blend-mode: multiply, multiply;
	opacity: 0;
	-webkit-transition: all .51s ease-in;
	-moz-transition: all .51s ease-in;
	transition: all .51s ease-in;
	visibility: hidden;
	
	margin-top: -100px;
	margin-left: -100px;
}

#divgd1, #divgd2, #divgd3, #divgd4 {
	width: 500px;
	height: 300px;
	OVERFLOW-Y: auto;
	OVERFLOW-X: hidden;
}

#divgd1::-webkit-scrollbar, #divgd2::-webkit-scrollbar, #divgd3::-webkit-scrollbar,
	#divgd4::-webkit-scrollbar {
	width: 10px;
	background-color: #575757
}

#divgd2::-webkit-scrollbar-thumb, #divgd2::-webkit-scrollbar-thumb,
	#divgd3::-webkit-scrollbar-thumb, #divgd4::-webkit-scrollbar-thumb {
	background-color: #FF6633;
	border-radius: 10px;
}

#divgd1::-webkit-scrollbar-thumb:hover, #divgd2::-webkit-scrollbar-thumb:hover,
	#divgd3::-webkit-scrollbar-thumb:hover, #divgd4::-webkit-scrollbar-thumb:hover
	{
	background-color: #A5281B;
}

#divgd1::-webkit-scrollbar-thumb:active, #divgd2::-webkit-scrollbar-thumb:active,
	#divgd3::-webkit-scrollbar-thumb:active, #divgd4::-webkit-scrollbar-thumb:active
	{
	border: 0;
	border-radius: 0;
	background-color: #A5281B
}

#divgd1::-webkit-scrollbar-thumb:window-inactive, #divgd2::-webkit-scrollbar-thumb:window-inactive,
	#divgd3::-webkit-scrollbar-thumb:window-inactive, #divgd4::-webkit-scrollbar-thumb:window-inactive
	{
	background-color: #FF6633
}

#model1.move, #model2.move, #model3.move, #model4.move {
	opacity: 1;
	visibility: visible;
}

.a_btn {
	width: 100px;
	border: none;
	padding: 0.6em 1.2em;
	background: #FF6633;
	color: #fff;
	font-family: "微软雅黑";
	font-size: 1em;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	display: inline-block;
	margin: 3px 2px;
	border-radius: 2px;
}

.a_btn:hover {
	background: #A5281B;
	text-decoration: none;
} /*指鼠标在链接*/
.a_btn:link {
	text-decoration: none;
} /* 指正常的未被访问过的链接*/
.close_btn {
	display: block;
	width: 100px;
	height: 36px;
	line-height: 36px;
	align: right;
	font-size: 12px;
	background: #FF6633;
	color: #fff;
	text-decoration: none;
	border: 0px solid #FFFFFF;
	cursor: pointer;
}

.close_btn:hover {
	background: #A5281B;
}

.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	background: rgba(52, 52, 52, 0.5);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
</style>
</head>
<body>
	<!-- 用布局把 项目介绍，要求，分工等做成几个方块按钮，点击则显示div层。 -->
	<div class="main clearfix">
		<div class="column">
			<table width="100" align="left" cellpadding="10" cellspacing="0">
				<tr>
					<td align="center"><a href="javascript:void(0);" id="btnout1"
						class="a_btn" onclick="opendiv('btnout1','#model1')">项目介绍</a></td>
					<td align="center"><a href="javascript:void(0);" id="btnout2"
						class="a_btn" onclick="opendiv('btnout2','#model2')">项目要求</a></td>
					<td align="center"><a href="javascript:void(0);" id="btnout3"
						class="a_btn" onclick="opendiv('btnout3','#model3')">项目分工</a></td>
					<td align="center"><a href="javascript:void(0);" id="btnout4"
						class="a_btn" onclick="opendiv('btnout4','#model4')">项目得分</a></td>
				</tr>
			</table>
		</div>
		<div class="">
			<div id="model1">
				<div id="divgd1">
					<p>
						<strong>项目介绍：</strong>
					</p>
					<ul>
						<c:out value="${group.proIntroduction}" />
					</ul>
				</div>
				<div align="right">
					<button id="btnin1" class="close_btn"
						onclick="closediv('btnin1','#model1')">关闭</button>
				</div>
			</div>
			<div id="model2">
				<div id="divgd2">
					<p>
						<strong>项目要求：</strong>
					</p>
					<ul>
						<c:out value="${group.proRequirement}" />
					</ul>
				</div>
				<div align="right">
					<button id="btnin2" class="close_btn"
						onclick="closediv('btnin2','#model2')">关闭</button>
				</div>
			</div>
			<div id="model3">
				<div id="divgd3">
					<p>
						<strong>项目分工：</strong>
					</p>
					<ul>
						<c:out value="${group.proDivision}" />
					</ul>
				</div>
				<div align="right">
					<button id="btnin3" class="close_btn"
						onclick="closediv('btnin3','#model3')">关闭</button>
				</div>
			</div>
			<div id="model4">
				<div id="divgd4">
					<p>(各项被评得分比例为 5:1:2:2)</p>
					<ul>
						<li><strong>被评人数:</strong> <c:out
								value="${group.numberOfEvaluater}" /></li>
						<li><strong>功能平均分:</strong> <c:out
								value="${group.functionScore}" /></li>
						<li><strong>界面效果平均分:</strong> <c:out
								value="${group.interfaceScore}" /></li>
						<li><strong>创新性平均分:</strong> <c:out
								value="${group.innovationScore}" /></li>
						<li><strong>答辩表现平均分:</strong> <c:out
								value="${group.oralDefenseScore}" /></li>
						<li><strong>被评总分平均分:</strong> <c:out
								value="${group.averageScore}" /></li>
					</ul>
				</div>
				<div align="right">
					<button id="btnin4" class="close_btn"
						onclick="closediv('btnin4','#model4')">关闭</button>
				</div>
			</div>
		</div>
	</div>
	<!-- the overlay element -->
	<div class="overlay" id="overlay"></div>

</body>
</html>